<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风机叶片异常检测系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 2rem;
            padding-bottom: 2rem;
            background-color: #f8f9fa;
        }
        .header {
            padding-bottom: 1rem;
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 2rem;
        }
        .result-card {
            margin-top: 20px;
            display: none;
        }
        .image-container {
            margin-top: 15px;
        }
        .image-container img {
            max-width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            margin-bottom: 10px;
        }
        .loading {
            display: none;
            text-align: center;
            margin-top: 20px;
        }
        .spinner-border {
            width: 3rem;
            height: 3rem;
        }
        .score-display {
            font-size: 24px;
            font-weight: bold;
            margin: 15px 0;
        }
        .status-normal {
            color: #28a745; /* 绿色 */
        }
        .status-review {
            color: #ffc107; /* 黄色 */
        }
        .status-anomaly {
            color: #dc3545; /* 红色 */
        }
        .status-badge {
            font-size: 16px;
            padding: 5px 10px;
            border-radius: 4px;
            margin-left: 10px;
            color: white;
            display: inline-block;
        }
        .badge-normal {
            background-color: #28a745;
        }
        .badge-review {
            background-color: #ffc107;
            color: #212529;
        }
        .badge-anomaly {
            background-color: #dc3545;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="text-center">风机叶片异常检测系统</h1>
            <p class="lead text-center">上传RGB图像和深度图进行异常检测</p>
        </div>

        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">上传图像</h5>
                        <form id="upload-form" enctype="multipart/form-data">
                            <div class="mb-3">
                                <label for="rgb-image" class="form-label">RGB图像</label>
                                <input type="file" class="form-control" id="rgb-image" name="rgb_image" accept="image/*" required>
                            </div>
                            <div class="mb-3">
                                <label for="depth-image" class="form-label">深度图 (可选)</label>
                                <input type="file" class="form-control" id="depth-image" name="depth_image" accept="image/*">
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="resize" class="form-label">调整大小 (Resize)</label>
                                        <input type="number" class="form-control" id="resize" name="resize" value="512">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="imagesize" class="form-label">图像大小 (Imagesize)</label>
                                        <input type="number" class="form-control" id="imagesize" name="imagesize" value="384">
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="model-path" class="form-label">模型路径 (可选)</label>
                                <input type="text" class="form-control" id="model-path" name="model_path" 
                                    value="F:\\workspace\\python\\new\\patch2\\model\\MVTecAD_Results\\IM384_WR50_L2-3_P01_D1024-1024_PS-3_AN-1_S0\\models\\mvtec_blade0">
                            </div>
                            <button type="submit" class="btn btn-primary w-100">开始检测</button>
                        </form>
                    </div>
                </div>

                <div class="loading">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-2">正在处理，请稍候...</p>
                </div>

                <div id="result-card" class="card result-card">
                    <div class="card-body">
                        <h5 class="card-title">检测结果</h5>
                        <div id="score-container" class="score-display text-center"></div>
                        <div id="status-container" class="text-center mb-4"></div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <h6>原始RGB图像</h6>
                                <div class="image-container">
                                    <img id="rgb-preview" src="" alt="RGB图像">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6>原始深度图</h6>
                                <div class="image-container">
                                    <img id="depth-preview" src="" alt="深度图">
                                </div>
                            </div>
                        </div>

                        <!-- <h6 class="mt-3">异常分割图</h6> -->
                        <div id="segmentation-container" class="row"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('upload-form');
            const loading = document.querySelector('.loading');
            const resultCard = document.getElementById('result-card');
            const scoreContainer = document.getElementById('score-container');
            const statusContainer = document.getElementById('status-container');
            const rgbPreview = document.getElementById('rgb-preview');
            const depthPreview = document.getElementById('depth-preview');
            const segmentationContainer = document.getElementById('segmentation-container');

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 显示加载状态
                loading.style.display = 'block';
                resultCard.style.display = 'none';
                
                // 准备表单数据
                const formData = new FormData(form);
                
                // 发送请求
                fetch('/detect', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.error || '请求失败');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    // 隐藏加载状态
                    loading.style.display = 'none';
                    
                    // 显示异常分数
                    const anomalyScore = parseFloat(data.anomaly_score);
                    
                    // 根据分数范围确定状态
                    let statusClass, statusText, badgeClass;
                    if (anomalyScore > 3.7) {
                        statusClass = 'status-anomaly';
                        statusText = '异常';
                        badgeClass = 'badge-anomaly';
                    } else if (anomalyScore >= 3.4) {
                        statusClass = 'status-review';
                        statusText = '需人工复核';
                        badgeClass = 'badge-review';
                    } else {
                        statusClass = 'status-normal';
                        statusText = '正常';
                        badgeClass = 'badge-normal';
                    }
                    
                    // 显示分数和状态
                    scoreContainer.innerHTML = `异常分数: <span class="${statusClass}">${anomalyScore.toFixed(6)}</span>`;
                    statusContainer.innerHTML = `<span class="status-badge ${badgeClass}">${statusText}</span>`;
                    
                    // 显示原始图像
                    rgbPreview.src = `/static/${data.rgb_image}`;
                    
                    // 显示深度图
                    depthPreview.src = `/static/${data.depth_image}`;
                    // if (data.depth_image) {
                    //     if (data.depth_image.startsWith('F:/')) {
                    //         // 如果是API生成的深度图，使用完整路径
                    //         depthPreview.src = `file:///${data.depth_image}`;
                    //     } else {
                    //         // 如果是上传的深度图，使用相对路径
                    //         depthPreview.src = `/static/${data.depth_image}`;
                    //     }
                    // } else {
                    //     depthPreview.style.display = 'none';
                    // }
                    
                    // 显示分割图
                    // segmentationContainer.innerHTML = '';
                    // if (data.segmentation_images && data.segmentation_images.length > 0) {
                    //     data.segmentation_images.forEach(image => {
                    //         const col = document.createElement('div');
                    //         col.className = 'col-md-6';
                            
                    //         const imgContainer = document.createElement('div');
                    //         imgContainer.className = 'image-container';
                            
                    //         const img = document.createElement('img');
                    //         img.src = `/static/${image}`;
                    //         img.alt = '分割图';
                            
                    //         imgContainer.appendChild(img);
                    //         col.appendChild(imgContainer);
                    //         segmentationContainer.appendChild(col);
                    //     });
                    // } else {
                    //     segmentationContainer.innerHTML = '<div class="col-12"><p>无可用的分割图</p></div>';
                    // }
                    
                    // 显示结果卡片
                    resultCard.style.display = 'block';
                    
                    // 如果有警告信息，显示提示
                    if (data.warning) {
                        alert('警告: ' + data.warning);
                    }
                })
                .catch(error => {
                    loading.style.display = 'none';
                    alert('错误: ' + error.message);
                    console.error('Error:', error);
                });
            });
        });
    </script>
</body>
</html>